<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>前端定位模块</title>
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"
    />
    <style>
      * {
        margin: 0;
        padding: 0;
        border: 0;
      }
      body {
        position: absolute;
        width: 100%;
        height: 100%;
        text-align: center;
      }
      #pos-area {
        background-color: #009ddc;
        margin-bottom: 10px;
        width: 100%;
        overflow: scroll;
        text-align: left;
        color: white;
      }
      #demo {
        padding: 8px;
        font-size: small;
      }
      #btn-area {
        height: 100px;
      }
      button {
        margin-bottom: 10px;
        padding: 12px 8px;
        width: 42%;
        border-radius: 8px;
        background-color: #009ddc;
        color: white;
      }
    </style>
    <script
      type="text/javascript"
      src="https://apis.map.qq.com/tools/geolocation/min?key=S3HBZ-XT63W-RT4RO-OFMBG-HLXDH-GPBKB&referer=myapp"
    ></script>
  </head>
  <body>
    <div id="pos-area">
      <p id="demo">点击下面的按钮，获得对应信息：<br /></p>
    </div>

    <div id="btn-area">
      <button onClick="getCurLocation()">获取精确定位信息</button>
      <button onClick="geolocation.getIpLocation(showPosition, showErr)">
        获取粗糙定位信息
      </button>
      <button onClick="showWatchPosition()">开始监听位置</button>
      <button onClick="showClearWatch()">停止监听位置</button>
    </div>

    <script type="text/JavaScript">
       var vConsole = new VConsole();
      var geolocation = new qq.maps.Geolocation();


      document.getElementById("pos-area").style.height = (document.body.clientHeight - 110) + 'px';

      var options = {timeout: 60000};
      var positionNum = 0;

      function getCurLocation() {
          geolocation.getLocation(showPosition, showErr, options);
      }
      function showPosition(position) {
          positionNum ++;
          document.getElementById("demo").innerHTML += "序号：" + positionNum;
          document.getElementById("demo").appendChild(document.createElement('pre')).innerHTML = JSON.stringify(position, null, 4);
          document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
      };

      function showErr(err) {
          console.log(err)
          positionNum ++;
          document.getElementById("demo").innerHTML += "序号：" + positionNum;
          document.getElementById("demo").appendChild(document.createElement('p')).innerHTML = "定位失败！";
          document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
      };

      function showWatchPosition() {
          document.getElementById("demo").innerHTML += "开始监听位置！<br /><br />";
          geolocation.watchPosition(showPosition);
          document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
      };

      function showClearWatch() {
          geolocation.clearWatch();
          document.getElementById("demo").innerHTML += "停止监听位置！<br /><br />";
          document.getElementById("pos-area").scrollTop = document.getElementById("pos-area").scrollHeight;
      };
    </script>
  </body>
</html>
预览
